{% extends 'base.html' %}
{% block page_content %}

<div class="panel panel-primary">
    <div class="panel-heading">车费审批</div>
    <div class="panel-body">
        <div class="row">

            <div class="col-md-offset-1 col-md-10" style="margin-bottom: 15px;">

                <form class="form-inline" method="post" action="/fare/farecheck/">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="drive_date1">乘车时间:从</label>
                        <input type="date" class="form-control" id="drive_date1" name="drive_date1" value="{{ conditions.drive_date__gte }}">
                    </div>
                    <div class="form-group">
                        <label for="drive_date2">至</label>
                        <input type="date" class="form-control" id="drive_date2" name="drive_date2" value="{{ conditions.drive_date__lte }}">
                    </div>
                    <div class="form-group">
                        <label for="department">用车部门</label>
                        <select class="form-control" id="department" name="department">
                             <option value="">--------</option>
                            {% for dep in dep_list %}
                            <!-- 首先数据类型要一致 //-->
                            {% if dep.id == conditions.dep_id %}
                            <option value={{ dep.id }}  selected>{{ dep.dep_name }}</option>
                            {% else %}
                             <option value={{ dep.id }}>{{ dep.dep_name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>

                    </div>
                    &nbsp; &nbsp; &nbsp; &nbsp;<button type="submit" class="btn btn-primary"><i class="fa fa-search"
                                                                                                aria-hidden="true"></i>
                    查询
                </button>
                             {% if pagpermission.has_edit %}
                     &nbsp; &nbsp; &nbsp; &nbsp;<!-- 按钮触发模态框 -->
                        <button type='button' class="btn  btn-primary btn-md " data-toggle="modal"
                                data-target="#myModal">
                            <i class="fa fa-check" aria-hidden="true" ></i>审批通过</button>
                            {% endif %}
                </form>

            </div>
        </div>

        <table class="table table-striped table-hover table-bordered">
            <thead>
            <th class="bg-info"><input type="checkbox" id="allrow" onclick="checkallrow()"  style= "height:20px;width:60px"></th>
            <th class="bg-info text-center">用车部门</th>
            <th class="bg-info text-center">乘车人</th>
            <th class="bg-info text-center">车牌</th>
            <th class="bg-info text-center">司机</th>
            <th class="bg-info text-center">单价</th>
            <th class="bg-info text-center">公里数</th>
            <th class="bg-info text-center">车费</th>
            <th class="bg-info text-center">乘车时间</th>
            <th class="bg-info text-center">乘车说明</th>
            <th class="bg-info text-center">录入人员</th>

            </thead>
            <tbody>
            {% for row in fare_list %}
            <tr >
                <td><input type="checkbox" name="farecheck" rowid="{{ row.id }}" style= "height:20px;width:60px"></td>
                <td>{{ row.dep.dep_name }}</td>
                <td>{{ row.passenger}}</td>
                <td>{{ row.car.plate_number }}</td>

                <td>{{ row.car.driver }}</td>
                <td class="text-right">{{ row.car.price }}</td>
                <td class="text-right">{{ row.distance }}</td>
                <td class="text-right">{{ row.fare }}</td>
                <td>{{ row.drive_date|date:'Y-m-d'}}</td>
                <td>{{ row.remark}}</td>
                <td>{{ row.oprator }}</td>


            </tr>
            {% endfor %}
            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {{ page_nav|safe }}
            </ul>
        </nav>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!--<div class="modal-header"> -->
            <div class="modal-header" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">审核记录</h4>
            </div>
            <div class="modal-body">
                <p id="mess">你确认要将选中的记录，审批通过？</p>
                <input type="hidden" id="rowid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="approve_ok()">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
function checkallrow()
{
    var rows=$('input[name="farecheck"]');
    if($('#allrow').is(':checked'))
    {

        for(i=0;i<rows.length;i++)
        rows[i].checked=true;
    }
    else
      {
        for(i=0;i<rows.length;i++)
        rows[i].checked=false;
    }
}
function ids_str()
{
 var ids = [];
    var vchecks=$('tbody').find('input:checked');
    if (vchecks.length ==0){

        return 'no_row';
    }
    $(vchecks).each(function(){
        ids.push($(this).attr('rowid'));
    });
    var id_string=ids.join(',');
    return id_string;

}

$('#myModal').on('show.bs.modal', function (event) {
   ids=ids_str();
   var modal = $(this);
   if (ids== 'no_row')
   {
       modal.find('#mess').text('无记录选中！');
       modal.find('#rowid').val('');
   }
   else
   {
        modal.find('#mess').text('你确认要将选中的记录，审批通过？');
        modal.find('#rowid').val(ids);
   }

})
function approve_ok()
{

    var rowid= $("#rowid").val();
    if (rowid=='')
    {
      $('#myModal').modal('hide');
      return;

    }

    $.ajax({
        url:"/fare/fareapprove/"+rowid+"/",
        type:"GET",
        success:function(data){
            var dic=JSON.parse(data);
            //alert(dic.status);
            if(dic.status){
            window.location.href='/fare/farecheck/';
            $('#myModal').modal('hide');
        }

     }
    })
}




</script>

{% endblock %}

